---
title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content.
shadcnDocsLink: https://ui.shadcn.com/docs/components/accordion
---

<ComponentPreview component="accordion">
  ```tsx file=<rootDir>/src/examples/ui/accordion.tsx
  ```
</ComponentPreview>

## Installation

<Installation component="accordion">
  ```tsx file=<rootDir>/src/components/ui/accordion.tsx
  ```
</Installation>

## Usage

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
```

```tsx
<Accordion type="single" collapsible className="w-full max-w-xl">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```